<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/like.css">
</head>
<body>
    <div class="push-like">
        <div class="content">
            <div class="title1">
                <h3>猜你喜欢</h3>
                <a href="#" id="a"><i></i>换一换</a>
            </div>
            <div class="bb">
                <ul>
                    <li>
                        <a href="item.html"><img src="uploads/like_01.png"></a>
                        <div class="like-texts">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li class="yui3-u-1-2">
                        <a href="item.html" class="pic"><img src="uploads/like_02.png"></a>
                                <div class="like-texts">
                                    <p>爱仕达 30CM炒锅不粘锅NWG8330E电磁炉炒</p>
                                    <h3>¥116.00</h3>
                                </div>
                    </li>
                    <li class="yui3-u-1-3">
                        <a href="item.html" class="pic"><img src="uploads/like_03.png"></a>
                                <div class="like-texts">
                                    <p>捷波朗 </p>
                                    <p>（jabra）BOOSI劲步</p>
                                    <h3>¥236.00</h3>
                                </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <a href="item.html" class="pic"><img src="uploads/like_04.png"></a>
                        <div class="like-texts">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li class="yui3-u-1-5">
                        <a href="item.html" class="pic"><img src="uploads/like_05.png"></a>
                                <div class="like-texts">
                                    <p>捷波朗 </p>
                                    <p>（jabra）BOOSI劲步</p>
                                    <h3>¥236.00</h3>
                                </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <a href="item.html" class="pic"><img src="uploads/like_06.png"></a>
                                <div class="like-texts">
                                    <p>三星（G5500）</p>
                                    <p>移动联通双网通</p>
                                    <h3>¥566.00</h3>
                                </div>
                    </li>
                    <li class="yui3-u-1-7">
                        <a href="item.html" class="pic"><img src="uploads/like_01.png"></a>
                        <div class="like-texts">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                    <li class="yui3-u-1-8">
                        <a href="item.html" class="pic"><img src="uploads/like_01.png"></a>
                        <div class="like-texts">
                            <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                            <h3>¥116.00</h3>
                        </div>
                    </li>
                </ul>
                <a href="javascript:;" id="goPrev">&laquo;</a>
                <a href="javascript:;" id="goNext">&raquo;</a>
            </div>
        </div>
    </div>
</body>
<script>
    class Move{
       timer = '';
        constructor(){
            this.bindEve();
            this.scroll();
        }
        bindEve(){
            this.$('ul').addEventListener('mouseover', this.Prev());
            // this.$('.dd ul').addEventListener('mouseout', this.Next());
        }
       
        // 自动xuanzhuan
        
        scroll(){
            let pos = 0;
            this.timer = setInterval(() => {
                pos--;
	        	if(pos <= -400){
	        		pos = 0;
	        	}
	        	this.$('ul').style.left = pos + 'px';
            },30)
        } 
        
        Prev(){

            clearInterval(this.timer); 
            console.log(11111);
        }

        // Next(){
        //     this.scroll();
        // }
        $(ele){
            let res = document.querySelectorAll(ele);
            return res.length ==1 ? res[0] : res;
        }
    }
    new Move;
</script>
</html>